<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志</title>
    <!-- 引入资源 -->
    <script src="/js/vue.js"></script>
    <script src="/js/axios-0.18.0.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!--导入axios二次封装的工具-->
    <script src="/js/request.js"></script>

</head>
<body>
<div id="app">
    <el-table
            :data="logs"
            border
            style="width: 95%;margin-top: 10px">
        <el-table-column
                prop="id"
                label="编号">
        </el-table-column>

        <el-table-column
                prop="reqType"
                label="请求方式"
               >
        </el-table-column>

        <el-table-column
                prop="ip"
                label="ip地址">
        </el-table-column>

        <el-table-column
                prop="reqUrl"
                label="请求url">
        </el-table-column>

        <el-table-column
                prop="fullClass"
                label="全类名">
        </el-table-column>

        <el-table-column
                prop="method"
                label="方法的调用">
        </el-table-column>

        <el-table-column
                prop="reqParams"
                label="请求参数">
        </el-table-column>

        <el-table-column
                prop="respData"
                label="返回参数">
        </el-table-column>

        <el-table-column
                prop="optTime"
                label="操作时间">
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 3, 4]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

</div>
<script>

    new Vue({
        el:"#app",
        data:{
            currentPage:1,  //当前页面
            pageSize:2,    // 每页大小
            total:0,       // 总数
            logs:[]
        },
        created(){
            this.initData(this.currentPage,this.pageSize);
        },
        methods:{
            handleCurrentChange(val){
                this.currentPage = val;
                this.initData(this.currentPage,this.pageSize);
            },
            handleSizeChange(val){
                this.pageSize = val;
                this.initData(this.currentPage,this.pageSize);
            },
            initData(currentPage,pageSize){
                request({
                    method:"get",
                    url:`/log/list/${currentPage}/${pageSize}`
                }).then(resp=>{
                    // 拿到分页对象  resp.data.data
                    // 分页对象 后面的data total 是封装的数据
                    this.logs= resp.data.data.data;
                    this.total = resp.data.data.total;
                })
            }
        }
    })

</script>

</body>
</html>